<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取元素偏移量</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 500px;
            height: 500px;
            background: yellow;
        }
        #myParent{
            width: 300px;
            height: 300px;
            background: blue;
        }
        #child{
            width: 100px;
            height: 100px;
            background: red;
        }
        div{
            margin: 50px;
            overflow: hidden;
        }
        ul{
            width: 200px;
            height: 200px;
            padding: 20px;
            border: 10px solid black;
            background: red;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="myParent">
            <div id="child"></div>
        </div>
    </div>
    <ul id="list"></ul>
    <script>
        /*
            参考点是第一个定位父级  如果都没有 那么相对的body
        */
        console.log(child.offsetLeft, child.offsetTop)
        console.log(myParent.offsetLeft, myParent.offsetTop)
        console.log(box.offsetLeft, box.offsetTop)
        /*
            padding+内容距离左上角的内容 其实就是border的宽高
        */
        console.log(list.clientLeft, list.clientTop)
    </script>
</body>
</html>